<h3>home组件</h3>

<!-- 动态引入图片 -->
<img [src]="picUrl" alt="">


<div>
    <!-- 数据循环获取key -->

    <ul>
        <li *ngFor="let item of lists; let key = index">
            key:{{key}} --- {{item.title}}
        </li>
    </ul>
</div>

<div>
    <h4>条件判断 *ngIf</h4>
    <p>flag=true</p>
    <div *ngIf="flag">条件为真  flag</div>

    <div *ngIf="!flag">调价为假   !falg</div>
</div>

<div>
    <h4>条件判断 *ngSwitch</h4>
    <p>flag=true</p>
    <div *ngIf="flag">条件为真  flag</div>

    <div *ngIf="!flag">调价为假   !falg</div>
</div>

<div [ngSwitch]="status">
    <p *ngSwitchCase="1">
        已经支付
    </p>
    <p *ngSwitchCase="2">
        已经发货
    </p>
    <p *ngSwitchCase="3">
        已经收货
    </p>
    <p *ngSwitchDefault>
        无订单详情
    </p>
</div>

<div>
    <h4>动态样式 指令 ngStyle</h4>
    <!-- 加 '' 就会识别为 值， 不加的话会识别成变量 -->
    <p [ngStyle]="{'color': 'green' }">style样式</p>
    <p [ngStyle]="{'color': attr }">style样式2</p>
</div>
<div>
    <h4>动态class 指令 ngClass</h4>
    <p [ngClass]="{'red': true, 'border': false}">class 样式</p>
    <p [ngClass]="{'red': false, 'blue': true, 'border': true}">class 样式2</p>
    <p [ngClass]="{'red': flag, 'blue': !flag}">class 样式3</p>
</div>


<div>
    <h3>管道： 给日期时间戳指定格式</h3>

    {{today | date: 'yyy-MM-dd HH:mm:ss'}}
</div>


<div>
    <h4>事件</h4>
    {{msg}}
    <button (click)="run()">执行事件</button>
    <button (click)="getData()">执行方法获取数据</button>
    <button (click)="setData()">执行方法改变数据</button>

    <button (click)="runEvent($event)">执行方法回去当前事件对象</button>
</div>


<div>
    <h4>表单事件</h4>

    <!-- 键盘事件 -->
    <!-- <input type="text" (keydown)="keyDown()"> -->
    <!-- 传入原生事件 -->
    <input type="text" (keydown)="keyDown($event)">
</div>

<div>
    <h2>双向数据绑定 MVVM---只针对表单</h2>
    <!-- 需要在根组件里 引入 FormsModule (见 app.modules.ts里), 然后在 imports 里注册声明一下 , 才能使用 ngModle-->
    <input type="text" [(ngModel)]="keywords"> {{keywords}}
</div>
